<template>
	<view class="userCommon">
		<view class="userCommon-header ff-bg-blue"></view>
		<view class="userCommon-content ff-padding-15">
			<view class="userCommon-content-box ff-border-radius-10 ff-bg-fff">
				<view class="ff-flex ff-flex-between">
					<view>
						<view class="ff-font-17 ff-font-weight-600 ff-margin-bottom-10">管理员与员工</view>
						<view class="ff-color-blue ff-font-13">创建的账号用于登录与发布需求等</view>
					</view>
					<image src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/user-icon1.png"
						mode=""></image>
				</view>
				<view @click="userClick" class="ff-border-radius-10 userCommon-content-box-tips">
					<view class="ff-flex-between ff-align-items-1">
						<view>
							<view class="ff-font-30 ff-color-blue ff-font-weight-600 ff-margin-bottom-8">
								<u-count-to :start-val="0" :end-val="numList.staffCount" :duration="2000"
									color="#1673FF" bold="true" font font-size="60" :use-easing="true"></u-count-to>
							</view>
							<view class="ff-font-12">已注册账号</view>
						</view>
						<view class="userCommon-content-box-tips-but ff-bg-blue ff-color-fff ff-font-15">管理</view>
					</view>
				</view>
			</view>
			<view class="userCommon-content-box ff-border-radius-10 ff-bg-fff ff-margin-top-15">
				<view class="ff-flex ff-flex-between">
					<view>
						<view class="ff-font-17 ff-font-weight-600 ff-margin-bottom-10">消防控制室持证人员</view>
						<view class="color1 ff-font-13">仅用于信息登记，非创建账号</view>
					</view>
					<image src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/user-icon2.png"
						mode=""></image>
				</view>
				<view @click="holderClick" class="ff-border-radius-10 userCommon-content-box-tips bg1">
					<view class="ff-flex-between ff-align-items-1">
						<view>
							<view class="ff-font-30 ff-color-blue ff-font-weight-600 ff-margin-bottom-8">
								<u-count-to :start-val="0" :end-val="numList.certCount" :duration="2000" color="#FF6010"
									bold="true" font font-size="60" :use-easing="true"></u-count-to>
							</view>
							<view class="ff-font-12 color2">已登记员工</view>
						</view>
						<view class="userCommon-content-box-tips-but but1 ff-bg-blue ff-color-fff ff-font-15">管理</view>
					</view>
				</view>
			</view>
		</view>
		<f-loading ref="loading" />
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				numList: {} // 数量对象
			}
		},
		onLoad() {
			this.getStaffCertCount() // 获取数量
		},
		onShow() {
			this.getStaffCertCount() // 获取数量
		},
		computed: {},
		methods: {
			// 获取数量
			async getStaffCertCount() {
				this.$refs.loading.openLoading('加载中···'); // 打开loading动画
				const data = await this.$http.get({
					url: '/company/staffCertCount'
				})
				// console.log('获取数量', data)
				if (data.code == 200) {
					this.numList = data.data
				} else {
					this.$refs.uToast.show({
						title: data.msg,
						type: 'error'
					});
				}
				this.$refs.loading.closeLoading(); // 关闭loading动画
			},
			// 跳转人员管理页面
			userClick() {
				this.$pageJump.navigateTo(
					'/pages/maintenance/company/home/components/personnelManagement/components/personnelManagement');
			},
			// 跳转消防控制室持证人页面
			holderClick() {
				this.$pageJump.navigateTo(
					'/pages/maintenance/company/home/components/personnelManagement/components/holderList?num=' +
					this.numList.certCount);

			}
		}
	}
</script>

<style lang="scss" scoped>
	.userCommon {
		&-header {
			width: 100%;
			height: 257rpx;
			border-bottom-left-radius: 25rpx;
			border-bottom-right-radius: 25rpx;
		}

		&-content {
			margin-top: -220rpx;

			&-box {
				padding: 36rpx 30rpx;

				image {
					width: 120rpx;
					height: 120rpx;
				}

				&-tips {
					background-image: linear-gradient(to right, #F2F6FF, #F8FAFF);
					padding: 40rpx;
					margin-top: 23rpx;

					.ff-font-12 {
						color: #7284A5;
					}

					&-but {
						background-image: linear-gradient(to right, #3178FF, #1673FF);
						border-radius: 35rpx;
						padding: 22rpx 45rpx;
					}
				}

				.bg1 {
					background-image: linear-gradient(to right, #FFF1E3, #FFF7EF) !important;
				}

				.but1 {
					background-image: linear-gradient(to right, #FF8F1F, #FF6010) !important;
				}

				.color1 {
					color: #FF6010;
				}

				.color2 {
					color: #AB6B42 !important;
				}
			}
		}
	}
</style>